
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <view>
      <u-navbar :back-text="navTitle"></u-navbar>
    </view>
    <!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->
      <monthSelect ref="monthSelectRef" @change="changeDate" :defaultMonths="months"></monthSelect>
      <view class="u-table-wrap">
        <view class="table-unit">单位：万支</view>
        <u-table>
          <u-tr>
            <u-th>单位</u-th>
            <u-th style="width: max-content;padding: 0;">
              <u-th style="width: 600rpx;">{{ months[1] }}</u-th>
              <u-tr>
                <u-th>按条码</u-th>
                <u-th>不详</u-th>
                <u-th>合计</u-th>
              </u-tr>
            </u-th>
            <u-th>单位</u-th>
            <u-th style="width: max-content;padding: 0;">
              <u-th style="width: 600rpx;">{{months[0]}}-{{ months[1] }}</u-th>
              <u-tr>
                <u-th>按条码</u-th>
                <u-th>不详</u-th>
                <u-th>合计</u-th>
              </u-tr>
            </u-th>
          </u-tr>
          <u-tr v-for="(item, index) in tableList" :key="index">
            <u-td>{{item.currentMonthOrgName}}</u-td>
            <u-td>{{item.currentMonthCigaBarNum}}</u-td>
            <u-td>{{item.currentMonthCigaUnknownNum}}</u-td>
            <u-td>{{item.currentMonthTotalNum}}</u-td>
            <u-td>{{item.januaryToCurrentMonthOrgName}}</u-td>
            <u-td>{{item.januaryToCurrentMonthCigaBarNum}}</u-td>
            <u-td>{{item.januaryToCurrentMonthCigaUnknownNum}}</u-td>
            <u-td>{{item.januaryToCurrentMonthTotalNum}}</u-td>
          </u-tr>
        </u-table>
      </view>
    </view>
  </view>
</template>

<script> 
import monthSelect from './components/monthSelect'
import queryService from "@/service/query/query.service.js";
import dayjs from 'dayjs'

export default {
  components: { 
    monthSelect,
  },
  data() {
    const currentDate = dayjs().format('YYYY-MM');
    const year = new Date().getFullYear()
    return {
      months: [`${year}-01`, currentDate],
      tableList: [],
      userInfo: this.$store.state.userInfo,
    };
  }, 
  // 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
  mounted() {
    this.getMobileHReportDatas(this.months)
  },
  methods: {
 
    changeDate(value) {
      console.log(value)
      this.getMobileHReportDatas(value)
    },
    getMobileHReportDatas(dates){
      this.$modal.showLoading('加载中...');
      queryService.report.getMobileHReportDatas({
        reportCode: 'CIGA_INFLOW_PRODUCT_FlOW_PROVINCES_QUERY',
        reportName: '查获省外卷烟流入情况',
        reportParas: {
          startYearMonth: dates[0],
          endYearMonth: dates[1],
          compositionName: "",
          orgLevel: this.userInfo.orgLevel,
        },
      }).then(res => {
        this.$modal.hideLoading();
        if (res.success) {
          this.tableList = res.data?.[0]?.commonDetailList || [];
        } else {
          this.$u.toast(res.msg);
        }
      }).catch(e => {
        this.$modal.hideLoading();
        console.log(e);
        this.$u.toast('查询失败');
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.u-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  .table-unit{
    font-size: 24rpx;
    text-align: right;
    margin-top: 20rpx;
  }
  /deep/ .u-table {
    overflow-x: scroll;
    width: 100%;
    .u-tr{
      width: max-content;
      .u-td{
        background-color: #fff;
      }
      .u-th,
      .u-td{
        width: 200rpx;
        position: static;
        z-index: 0;
        flex: auto;
        height: auto;
        .u-th{
          &:last-child{
            border-right: 0 !important;
          }
          // border-bottom: 0 !important;
        }
      }
    }
    .u-tr .u-td:first-child,
    .u-tr .u-th:first-child{
      position: sticky;
      left: 0;
      z-index: 1;
    }
  }
}
 

</style>
